<template>
  <div id="zonghechart2">
    <div ref="chart"></div>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      chartDom: null,
      myChart: null,
    };
  },
  mounted() {
    // this.initLineColor();
    this.initChartRadar();
  },
  methods: {
    initLineColor() {
      const arr = [
        ["rgba(119, 168, 145, 1)", "rgba(176, 210, 194, 1)"],
        ["rgba(245, 132, 178, 1)", "rgba(248, 163, 143, 1)"],
        ["rgba(80, 164, 164, 1)", "rgba(98, 187, 193, 1)"],
        ["rgba(164, 138, 214, 1)", "rgba(123, 167, 225, 1)"],
        ["rgba(106, 157, 201, 1)", "rgba(88, 103, 133, 1)"],
        ["rgba(13, 195, 147, 1)", "rgba(28, 218, 162, 1)"],
        ["rgba(234, 212, 86, 1)", "rgba(230, 148, 51, 1)"],
        ["rgba(75, 136, 254, 1)", "rgba(46, 190, 239, 1)"],
        ["rgba(242, 70, 123, 1)", "rgba(248, 124, 159, 1)"],
        ["rgba(90, 85, 160, 1)", "rgba(145, 137, 225, 1)"],
      ];

      const list = [];
      arr.forEach((item) => {
        list.push(
          new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: item[0] }, //柱图高亮渐变色
            { offset: 1, color: item[1] }, //柱图高亮渐变色
          ])
        );
      });

      this.lineList = list;
    },
    initChartRadar() {
      const chartDom = this.$refs.chart;
      let myChart = this.$echarts.init(chartDom);
      let data = [421, 622, 625, 265, 224];
      const title = ["2021级", "2022级", "2023级", "2024级", "2025级"];

      const option = {
        title: {
          text: "成绩/期望值",
          textStyle: {
            fontSize: 14,
            color: "#385899",
            fontWeight: 400,
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        xAxis: {
          type: "category",
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "rgba(114, 114, 114, 1)",
            fontSize: 14,
            fontWeight: 400,
            interval: 0,
          },

          axisLine: {
            lineStyle: {
              color: "rgba(238, 238, 238, 1)",
            },
          },
          data: title,
        },
        yAxis: {
          type: "value",
        },
        // dataZoom: [
        //   {
        //     show: true,
        //     realtime: true,
        //     start: 0,
        //     end: 50,
        //     left: 200,
        //     right: 200,
        //   },
        //   {
        //     type: "inside",
        //     realtime: true,
        //     start: 0,
        //     end: 50,
        //   },
        // ],
        series: [
          {
            data: data,
            markLine: {
              // symbol: ["circle", "arrow"],
              symbol: ["none", "none"],
              data: [
                {
                  //数值
                  yAxis: 55,
                  label: {
                    position: "end",
                    formatter: "期望值",
                  },
                  lineStyle: {
                    color: "rgba(56, 88, 153, 1)",
                  },
                },
              ],
              silent: true,
            },
            type: "bar",
            barWidth: "20",
            itemStyle: {
              shadowBlur: 10,
              borderRadius: 20,
              shadowColor: "rgba(204, 204, 204, 0.7)",
              color: (params) => {
                return this.lineList[params.dataIndex];
              },
            },
          },
        ],
      };

      myChart.setOption(option);
    },
  },
};
</script>
<style lang="scss" scoped>
#zonghechart2 {
  > div {
    width: 100%;
    height: 360px;
  }
}
</style>